﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="maintainItemListTable" class="main-content">
    <h3 class="page-title">保养项目管理Maintenance project management</h3>

    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">条件查询Condition query</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body container-fluid">
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">保养项目内容Maintenance item content</span>
                        <input type="text" class="form-control" v-model="searchModel.queryName" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备类型equipment type</span>
                        <select class="form-control" v-model="searchModel.queryTypeID">
                            <option v-for="(value, key, idx) in typeDictionary" v-bind:value="value">{{key}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">是否禁用Whether Disable</span>
                        <select class="form-control" v-model="searchModel.queryIsDisable">
                            <option v-for="(value, key, idx) in isDisableDictionary" v-bind:value="value">{{key}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <br />
                    <button class="btn btn-default btn-sm" v-on:click="SearchReset">
                        <i class="fa fa-eraser"></i> 清空empty
                    </button>
                    <button class="btn btn-default btn-sm" v-on:click="SearchItem">
                        <i class="fa fa-search"></i> 查询query
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- TABLE  -->
    <div class="panel">
        <div class="panel-body">
            <button class="btn btn-primary" v-on:click="AddItem">
                <i class="fa fa-plus"></i> 新增保养项目add maintenance items
            </button>
            <br />
            <br />
            <table class="table table-striped" v-if="isNotEmptyObject(pageModel.results)">
                <thead>
                    <tr>
                        <td colspan="5">
                            <div class="form-inline text-right">
                                <label class="control-label">每页记录数Records per page：</label>
                                <select class="form-control input-sm" style="width:auto;" v-model="pageModel.pageSize">
                                    <option value="10">10条Article 10</option>
                                    <option value="30">30条Article 30</option>
                                    <option value="50">50条Article 50</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID</th>
                        <th>保养项目名称Maintenance item name</th>
                        <th>设备类型Equipment type</th>
                        <th>是否禁用whether disable</th>
                        <th>操作operation</th>
                    </tr>
                </thead>
                <tbody v-for="(item, index) in pageModel.results">
                    <tr>
                        <td>{{item.ID}}</td>
                        <td>{{item.Name}}</td>
                        <td>
                            <span v-for="(value, key, idx) in typeDictionary">
                                <span v-if="value == item.EquipmentTypeID">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <span v-for="(value, key, idx) in isDisableDictionary">
                                <span v-if="value == item.IsDisable">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-warning btn-sm" v-if="item.IsDisable == 0" v-on:click="DisableItem(item.ID, true)">
                                <i class="fa fa-close"></i> 禁用Disable
                            </button>
                            <button type="button" class="btn btn-success btn-sm" v-if="item.IsDisable == 1" v-on:click="DisableItem(item.ID, false)">
                                <i class="fa fa-edit"></i> 启用Enable
                            </button>
                            <button type="button" class="btn btn-info btn-sm" v-on:click="EditItem(item.ID)">
                                <i class="fa fa-edit"></i> 编辑edit
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" v-on:click="DeleteItem(item)">
                                <i class="fa fa-trash"></i> 删除delete
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="9">
                            <nav class="text-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="pageModel.pageIdx > 1">
                                        <a href="#" aria-label="Previous" v-on:click="GotoPage(pageModel.pageIdx - 1)">
                                            <span aria-hidden="true">
                                                <i class="fa fa-angle-left"></i> 上一页previous page
                                            </span>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx != 1">
                                        <a href="#" v-on:click="GotoPage(1)">
                                            <i class="fa fa-step-backward"></i>
                                        </a>
                                    </li>
                                    <template v-for="idx in pageModel.pageLength">
                                        <li v-if="pageModel.pageIdx - idx > -5 && pageModel.pageIdx - idx < 5 " v-bind:class="pageModel.pageIdx == idx ? 'active' : ''">
                                            <a href="#" v-on:click="GotoPage(idx)">{{idx}}</a>
                                        </li>
                                    </template>
                                    <li v-if="pageModel.pageIdx != pageModel.pageLength">
                                        <a href="#" v-on:click="GotoPage(pageModel.pageLength)">
                                            <i class="fa fa-step-forward"></i>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx < pageModel.pageLength">
                                        <a href="#" aria-label="Next" v-on:click="GotoPage(pageModel.pageIdx + 1)">
                                            <span aria-hidden="true">
                                                下一页next page <i class="fa fa-angle-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="alert alert-warning alert-dismissible" role="alert">
                <i class="fa fa-warning"></i>
                <p>禁用保养项目，是用于新建保养单模板时不会显示该项目Disabling an maintenance item is used to prevent it from being displayed when creating a new maintenance order template。</p>
                <p>禁用保养项目并不会关联保养单模板，如果已保存保养单模板里含有禁用保养项目，则需更新保养单模板才能生效Disabled maintenance items are not associated with the maintenance document template. If the saved maintenance document template contains disabled maintenance items, you need to update the maintenance document template to take effect。</p>
            </div>
        </div>
    </div>
    <!-- END TABLE -->

</div>


@section scripts{
    <script type="text/javascript" src="~/Scripts/pageJs/Maintain/Item.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
}
